<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main_graph" style="height:480px"></div>
<!-- ECharts单文件引入 -->
<script src="js/echarts-all.js"></script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main_graph'));
    var option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            show:true,
            data: ['CO', 'CO2','N2','PH3'],
            textStyle:{color:"auto"}
        },
        toolbox: {
            show: true,
            feature: {
                mark: {show: true},
                dataView: {readOnly: false},
                magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        title:{
            show:true,
            text:'仓库'
        },
        calculable: true,
        dataZoom: {
            show: true,
            realtime: true,
            start:40,
            end: 60,
            showDetail:true,
            fillerColor:'rgba(18,222,18,0.4)'
        },
        xAxis: [
            {
                type: 'category',
                name:'监测时间Time',
                boundaryGap: true,
                data: (function (){
                    var now = new Date();
                    var res = [];
                    var len = 10;
                    while (len--) {
                        res.unshift(now.toLocaleString().replace(/^\D*/,''));
                        now = new Date(now - 12*1000*60*60);
                    }
                    return res;
                })()
            }
        ],
        yAxis: [
            {
                type: 'value',
                name:"多少",
                min:"0",
                max:'10',
                // splitNumber:'16'
            }
        ],
        series: [
            {
                name: 'CO',
                type: 'line',
                data: function () {
                    var list = [];
                    for (var i = 1; i <= 30; i++) {
                        list.push(Math.round(Math.random() * 10));
                    }
                    return list;
                }()
            },
            {
                name: 'CO2',
                type: 'line',
                data: function () {
                    var list = [];
                    for (var i = 1; i <= 30; i++) {
                        list.push(Math.round(Math.random() * 10));
                    }
                    return list;
                }()
            },
            {
                name: 'N2',
                type: 'line',
                data: function () {
                    var list = [];
                    for (var i = 1; i <= 30; i++) {
                        list.push(Math.round(Math.random() * 10));
                    }
                    return list;
                }()
            },
            {
                name: 'PH3',
                type: 'line',
                data: function () {
                    var list = [];
                    for (var i = 1; i <= 30; i++) {
                        list.push(Math.round(Math.random() * 10));
                    }
                    return list;
                }()
            }
        ],
        animation:true,
        addDataAnimation:true,
        animationThreshold:true,
        animationDuration:true,
        animationDurationUpdate:5000,
        animationEasing:'Linear'
    };
    function eConsole(param) {
        var mes = '【' + param.type + '】';
        if (typeof param.seriesIndex != 'undefined') {
            mes += '  seriesIndex : ' + param.seriesIndex;
            mes += '  dataIndex : ' + param.dataIndex;
        }
        if (param.type == 'hover') {
            document.getElementById('hover-console').innerHTML = 'Event Console : ' + mes;
        }
        else {
            document.getElementById('console').innerHTML = mes;
        }
        console.log(param);
    }
    /*
     // -------全局通用
     REFRESH: 'refresh',
     RESTORE: 'restore',
     RESIZE: 'resize',
     CLICK: 'click',
     DBLCLICK: 'dblclick',
     HOVER: 'hover',
     MOUSEOUT: 'mouseout',
     // -------业务交互逻辑
     DATA_CHANGED: 'dataChanged',
     DATA_ZOOM: 'dataZoom',
     DATA_RANGE: 'dataRange',
     DATA_RANGE_HOVERLINK: 'dataRangeHoverLink',
     LEGEND_SELECTED: 'legendSelected',
     LEGEND_HOVERLINK: 'legendHoverLink',
     MAP_SELECTED: 'mapSelected',
     PIE_SELECTED: 'pieSelected',
     MAGIC_TYPE_CHANGED: 'magicTypeChanged',
     DATA_VIEW_CHANGED: 'dataViewChanged',
     TIMELINE_CHANGED: 'timelineChanged',
     MAP_ROAM: 'mapRoam',
     */
    myChart.on(echarts.config.EVENT.CLICK,function(e){
        eConsole();
    });
    myChart.on(echarts.config.EVENT.DBLCLICK, function(e){
        eConsole();
    });
    //myChart.on(ecConfig.EVENT.HOVER, eConsole);
//    myChart.on(echarts.config.EVENT.DATA_ZOOM, function(e){
//        eConsole();
//    });
    myChart.on(echarts.config.EVENT.LEGEND_SELECTED,function(e){
        eConsole();
    } );
    myChart.on(echarts.config.EVENT.MAGIC_TYPE_CHANGED, function(e){
        eConsole();
    });
    myChart.on(echarts.config.EVENT.DATA_VIEW_CHANGED, function(e){
        eConsole();
    });
    // 为echarts对象加载数据
    myChart.setOption(option);
</script>
</body>